$(()=>{
  //get dom elem
  let $width = $('#width'),
      $height = $('#height'),
      $btnCal = $('#calc'),
      $form = $('#main'),
      $perimeter = $('#perimeter'),
      $widthValidate = $('#width-validate'),
      $heightValidate = $('#height-validate'),
      $area = $('#area');

  function isLegalKey(key,content,pos){
    //过滤非法字符
    if(/[abcdf-zABCDF-Z`~!@#$%^&*()_+=[\]{}|;:'",<>/?\\]/.test(key)){
      return false;
    }
    //合法字符：.小数点
    if(key === '.'){
      //规则：小数点不能出现在数字的首位
      if(pos === 0) return false;
      //规则：小数点不能出现在小数中
      if(content.indexOf('.') !== -1) return false;
      //规则：小数点不能出现在负号及e或E的后面
      if(pos >0 && /[-eE]/.test(content.slice(0,pos))) return false;
    } 
    //合法字符：e或E科学计数法指数符号
    if(key === 'e' || key === 'E'){
      //规则：e或E不能出现在数字的首位
      if(pos === 0) return false;
      //规则：e或E不能出现在负号和小数点后面
      if(pos > 0 && /[-.]/.test(content.slice(pos-1,pos))) return false;
      //规则：e或E不能出现在小数点前面
      if(content.slice(pos,content.length).indexOf('.') !== -1) return false;
    }
    //合法字符：-负号
    if(key === '-'){
      //规则：符号不能出现在数字的首位
      if(pos === 0) return false;
      //规则：负号不能出现在数字和小数点后面
      if(pos > 0 && /[0-9.]/.test(content.slice(pos-1,pos))) return false;
      //规则：符号不能重复出现
      if(pos > 0 && content.indexOf('-') !== -1) return false;
    }
    return true;
  }
  $width.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;
    if(!isLegalKey(key,val,pos)) e.preventDefault();
  });

  $height.keypress((e)=>{
    let key = e.key,
        val = e.target.value,
        pos = e.target.selectionStart;
    if(!isLegalKey(key,val,pos)) e.preventDefault();
  })


  $width.focusout(()=>{
    if(!validate($width,$widthValidate)){
      $width.select();
    }
  });

  $height.focusout(()=>{
    if(!validate($height,$heightValidate)){
      $height.select();
    }
  })

  /*calc button click*/
  $btnCal.click(()=>{
    //get value
    let w = Number($width.val()),
        h = Number($height.val());
    //validate
    if(validate($width,$widthValidate) && validate($height,$heightValidate)){
      //calc
      let wN = w.toString().indexOf('.'),
          hN = h.toString().indexOf('.');
      if(wN <0 && hN <0){
        var p = Number((w+h)*2),
            a = Number(w*h);
        //output
        $perimeter.val(p);
        $area.val(a);
      }
      if(wN > 0 || hN >0){
        let wPoint = w.toString().length - wN -1,
            hPoint = h.toString().length - hN -1;
        let pn = wPoint > hPoint ? wPoint : hPoint,
            an = wPoint + hPoint;
        if(an <= 4){
          var p = roundFractional(Number((w+h)*2),pn),
              a = roundFractional(Number(w*h),an);
          $perimeter.val(p);
          $area.val(a);
        }else{
          var p = roundFractional(Number((w+h)*2),4),
              a = roundFractional(Number(w*h),4);
          $perimeter.val(p);
          $area.val(a);
        }
      }
    }
  });
});

function roundFractional(x,n){
  return Math.round(x * Math.pow(10,n))/Math.pow(10,n)
}

function validate(input,output){
  //console.log(input.val());
  //is empty
  if(input.val() === ''){
    output.html('该字段不能为空');
    return false;
  }else{
    output.html('');
  }
  //is Number
  let val = Number(input.val());
  if(isNaN(val)){
    output.html('该字段应该是数值');
    return false;
  }else{
    output.html('');
  }
  //is >0
  if(val < 0){
    output.html('该字段应该大于零');
    return false;
  }else{
    output.html('');
  }
  //
  return true;
}



